<template>
    <div class="v-selectmenu">

        <div class="caller-container" ref="caller"
             v-if="!embed"
             @mouseenter="moveIn"
             @mouseleave="moveOut"
             @contextmenu="mouseRight"
             @click="click">
            <slot></slot>
        </div>

        <!-- drop down list -->
        <v-dropdown ref="drop" @show-change="dropdownVisible"
                    :position="position"
                    :embed="embed"
                    :x="x" :y="y"
                    :right-click="rightClick" >

            <!-- header bar -->
            <div class="sm-header" v-if="title || !regular || state.group">
                <h3 v-text="headerText"></h3>
                <button type="button"
                        :title="i18n.select_all_btn"
                        class="sm-selectall-button"
                        @click="selectAll"
                        v-if="!regular && multiple">
                    <i class="iconfont icon-selectall"></i>
                </button>
                <button type="button"
                        :title="i18n.remove_all_btn"
                        class="sm-removeall-button"
                        @click="clear"
                        v-if="!regular">
                    <i class="iconfont icon-removeall"></i>
                </button>
                <button type="button"
                        @click="close"
                        :title="i18n.close_btn"
                        v-if="!embed"
                        class="sm-close-button">×</button>
            </div>

            <!-- search bar -->
            <div class="sm-input-area" v-if="!regular && query">
                <input type="text" autocomplete="off" ref="input"
                       v-model.trim="search"
                       @keyup="processKey"
                       @keydown.stop="processControl"
                       class="sm-input">
            </div>

            <!-- tabs bar -->
            <div class="sm-result-tabs" v-if="state.group">
                <ul>
                    <li v-for="tab,index in data">
                        <a href="javascript:void(0);"
                           :tab-id="'selectmenu-tab-' + (index+1)"
                           :data-index="index"
                           @click="tabIndex = index"
                           :class="{active:index === tabIndex}">{{tab.title}}</a>
                    </li>
                </ul>
            </div>

            <!-- results list -->
            <div :class="{
                    'sm-result-area':true,
                    'sm-scroll-limit': scroll,
                    'sm-list-mode': !regular && !state.group}" ref="list">
                <!-- max-height: 300px; -->
                <ul :class="{'sm-results': true}"
                    :style="listStyle"
                    ref="listUl" v-if="!regular">
                    <!-- advance menu list -->
                    <li pkey="11" v-for="item,index in results"
                        v-if="!regular && !message"
                        @click="selectItem(item)"
                        @mouseenter="highlight = index"
                        @mouseleave="highlight = -1"
                        :class="{'sm-selected': selected.includes(item), 'sm-over': index===highlight }">
                        <div class="sm-selected-icon"><i class="iconfont icon-selected"></i></div>
                        <div class="sm-item-text" v-html="getRowText(item)"></div>
                    </li>
                    <!-- no result message -->
                    <li class="sm-message-box" v-if="!results.length && !regular">
                        <i class="iconfont icon-warn"></i>
                        <span v-text="i18n.not_found"></span>
                    </li>
                    <li class="sm-message-box" v-if="message">
                        <i class="iconfont icon-warn"></i>
                        <span v-html="message"></span>
                    </li>
                </ul>
                <v-regular-menu v-if="regular"
                                :show="show"
                                :data="results"
                                :parent-instance="$parent"
                                @close="close"></v-regular-menu>
            </div>
        </v-dropdown>
    </div>
</template>

<script>
    import regular from './vRegularMenu';
    import drop from './Dropdown';
    import lang from './language';
    export default {
        name: "v-selectmenu",
        components: {
            'v-regular-menu': regular,
            'v-dropdown': drop
        },
        props: {
            value: String,
            data:{
                type: Array,
                required: true
            },
            regular: {
                type: Boolean,
                default: false
            },
            title: {
                type: [String, Boolean],
                default: false
            },
            keyField: {
                type: String,
                default: 'id'
            },
            showField: {
                type: String,
                default: 'name'
            },
            position: {
                type: String,
                default: 'left'
            },
            embed: {
                type: Boolean,
                default: false
            },
            rightClick: {
                type: Boolean,
                default: false
            },
            move: {
                type: Boolean,
                default: false
            },
            query: {
                type: Boolean,
                default: true
            },
            multiple: {
                type: Boolean,
                default: false
            },
            language: {
                type: String,
                default: 'cn'
            },
            maxSelected: {
                type: Number,
                default: 0
            },
            scroll: {
                type: Boolean,
                default: true
            }
        },
        provide(){
            return {
                parentInst: this.$parent,
                dropShow: this.show
            };
        },
        data(){
            return {
                results: [],
                subMenus: [],
                selected: [],
                search: '',
                headerText: '',
                i18n: lang[this.language],
                tabIndex: -1,
                show: false,
                highlight: -1,
                message: '',
                x: -1,
                y: -1,
                menuClass:{
                    'sm-regular': false
                },
                menuStyle: {
                    top: '',
                    left: ''
                },
                listStyle: {},
                state: {
                    group: false
                }
            };
        },
        methods: {
            open(){
                if(!this.show) {
                    this.show = true;
                    this.$nextTick(()=>{
                        this.$emit('show');
                    });
                } else this.inputFocus();
            },
            close(){
                this.$refs.drop.$emit('show', false);
                this.reset();
                this.$emit('hide');
            },
            reset(){
                this.x = -1;
                this.y = -1;
                this.highlight = -1;
            },
            inputFocus(){
                if(!this.query) return;
                let that = this;
                this.$nextTick(()=>{
                    //fix open drop down list and set input focus, the page will scroll to top
                    //that.$refs.search.focus({preventScroll:true}); only work on Chrome and EDGE
                    if(that.isChrome() || that.isEdge()) that.$refs.input.focus({preventScroll:true});
                    else{
                        let x = window.pageXOffset, y = window.pageYOffset;
                        that.$refs.input.focus();
                        if(window.pageYOffset !== y) setTimeout(function() { window.scrollTo(x, y); }, 0);
                    }
                });
            },
            dropdownVisible(val){
                this.show = val;
                if(!this.show) this.$emit('hide');
            },
            clear() {
                if(!this.regular){
                    this.selected.splice(0, this.selected.length);
                    if(!this.multiple) this.close();
                }
            },
            selectAll(){
                if(this.results.length && !this.message) {
                    if(this.maxSelected){
                        let left = this.maxSelected - this.selected.length;
                        let available = this.results.concat()
                            .filter(val=>!this.selected.includes(val))
                            .filter((val,idx)=>idx<left);
                        this.selected = [...this.selected, ...available];
                    }else this.selected = this.results;
                }
            },
            processKey(){
                let that = this;
                this.results = this.filter();
            },
            processControl(e){
                if (this.show &&
                    ([38, 40, 27, 9].includes(e.keyCode) ||
                        [13, 9].includes(e.keyCode) && this.highlight !== -1)) {
                    switch (e.keyCode) {
                        case 38:// up
                            this.prevLine();
                            break;
                        case 40:// down
                            this.nextLine();
                            break;
                        case 9: // tab
                        case 13:// return
                            if(this.highlight !== -1) this.selectItem(this.results[this.highlight]);
                            break;
                        case 27:// escape
                            this.show = false;
                            break;
                    }
                }
            },
            selectItem(item){
                if(this.multiple){
                    if(!this.selected.includes(item)) {
                        if(this.maxSelected && this.selected.length === this.maxSelected) this.buildMessage();
                        else this.selected.push(item);
                    }else{
                        let idx = this.selected.findIndex(value => Object.is(item, value));
                        if(idx !== -1)this.selected.splice(idx, 1);
                    }
                }else {
                    this.selected = [item];
                    this.close();
                }
            },
            nextLine(){
                let that = this;
                if(this.highlight < this.results.length-1) this.highlight++;

                this.$nextTick(()=>{
                    let cur = that.$refs.list.querySelectorAll('li.sm-over')[0],
                        curPos = cur.getBoundingClientRect(),
                        listPos = that.$refs.listUl.getBoundingClientRect(),
                        relTop = curPos.top - listPos.top,
                        dist = parseInt(relTop + curPos.height - listPos.height);
                    if(parseInt(relTop + curPos.height) > listPos.height)
                        that.$refs.list.scrollTop = dist;
                });
            },
            prevLine(){
                let that = this;
                if(this.highlight > 0) this.highlight--;
                else if(this.highlight === -1 && this.results.length) this.highlight = this.results.length -1;
                this.$nextTick(()=>{
                    let cur = that.$refs.list.querySelectorAll('li.sm-over')[0],
                        curPos = cur.getBoundingClientRect(),
                        listPos = that.$refs.listUl.getBoundingClientRect(),
                        relTop = curPos.top - listPos.top,
                        dist = parseInt(that.$refs.list.scrollTop - curPos.height);
                    if(parseInt(relTop) < parseInt(that.$refs.list.scrollTop))
                        that.$refs.list.scrollTop = dist;
                    if(relTop > listPos.height && this.highlight === this.results.length -1)
                        that.$refs.list.scrollTop = relTop - listPos.height + curPos.height;
                });
            },
            getRowText(row){
                let result = '';
                if(typeof(this.showField) === 'string') result = row[this.showField];
                else if(typeof(this.showField) === 'function') result = this.showField(row);
                return result;
            },
            filter(){
                let that = this;
                let list = this.state.group ? this.data[this.tabIndex].list.concat() : this.data.concat();
                return list.filter(val=>that.getRowText(val).toLowerCase().includes(that.search.toLowerCase()));
            },
            searchList(){
                let that = this, arr = [];
                if(this.regular){
                    arr = this.data[this.tabIndex].list;
                }else{
                    arr = this.search ? this.filter() : this.data[this.tabIndex].list;
                }
                this.results = arr;
            },
            checkDataType(){
                if(this.data && Array.isArray(this.data) && this.data.length){
                    let sample = this.data[0];
                    if(sample.title && sample.list) this.state.group = true;
                }
            },
            moveIn(){
                if(this.move) this.open();
            },
            moveOut(e){
                if(this.move) {
                    /*
                    let info = this.scrollInfo();
                    let theY = e.pageY || (e.clientY + info.y);
                    let callerPos = this.$refs.caller.getBoundingClientRect();
                    if(theY - (callerPos.top + callerPos.height + info.y) > 5) this.close();
                    */
                    this.close();
                }
            },
            click(){
                if(!this.move && !this.rightClick) this.open();
            },
            mouseRight(e){
                if(this.rightClick){
                    e.stopPropagation();
                    e.preventDefault();

                    let info = this.scrollInfo();
                    this.x = e.pageX || (e.clientX + info.x);
                    this.y = e.pageY || (e.clientY + info.y);

                    this.open();
                }
            },
            scrollInfo(){
                let supportPageOffset = window.pageXOffset !== undefined;
                let isCSS1Compat = ((document.compatMode || "") === "CSS1Compat");

                let x = supportPageOffset ? window.pageXOffset : isCSS1Compat ? document.documentElement.scrollLeft : document.body.scrollLeft;
                let y = supportPageOffset ? window.pageYOffset : isCSS1Compat ? document.documentElement.scrollTop : document.body.scrollTop;
                return { x: x, y: y };
            },
            buildMessage(){
                this.message = this.i18n.max_selected.replace('max_selected_limit',`<b>${this.maxSelected}</b>`);
            },
            isChrome(){
                return navigator.vendor !== undefined && navigator.vendor.indexOf("Google") !== -1;
            },
            isEdge(){
                return navigator.userAgent.indexOf("Edge") >= 0;
            },
            init(){
                if(this.value){
                    let that = this, vals = this.value.split(',');
                    if(vals.length){
                        if(!this.multiple) vals = [vals[0]];
                        if(this.state.group){
                            let arr = [];
                            for(let d of this.data){
                                arr = [...arr, ...d.list.concat().filter(val=>{
                                    return vals.includes(String(val[that.keyField]));
                                })];
                            }
                            this.selected = arr.concat();
                        }else{
                            this.selected = this.data.concat().filter(val=>vals.includes(String(val[that.keyField])));
                        }
                    }
                }
            }
        },
        watch:{
            tabIndex(val){
                this.tabIndex = val;
                this.searchList();
            },
            show: function(val){
                let that = this;
                if(val) {
                    this.$refs.drop.$emit('show', true, this.$refs.caller);
                    if(!that.regular) this.inputFocus();
                    this.$nextTick(()=>{
                        this.$emit('show');
                    });
                }
            },
            value(val){
                this.init();
            },
            selected(val){
                if(this.message && this.maxSelected && val.length < this.maxSelected) this.message = '';
                this.$emit('input', val.concat().map(value=>value[this.keyField]).join(','));
                this.$emit('values', val.concat());
            }
        },
        mounted(){
            let that = this;
            this.checkDataType();

            if(this.title){
                this.headerText = this.title;
            }else{
                if(this.regular && this.state.group) this.headerText = this.i18n.regular_group;
                if(!this.regular) this.headerText = this.i18n.advance_default;
            }

            if(this.data.length){
                if(this.state.group) this.tabIndex = 0;
                else this.results = this.data.concat();
            }
            if(this.regular) this.menuClass['sm-regular'] = true;
            else this.init();

            this.$on('clear', this.clear);
        },
        destroyed(){
            this.$off('clear', this.clear);
        }
    }
</script>

<style lang="scss" >
    .v-selectmenu {
        .caller-container {
            display: inline-block;
        }
    }
    /**
     * Target item style, when menu opened
     */
    .sm-target-clicked {
        background-color: #e9ecef;
        background-image: none;
        border-color: rgba(27,31,35,0.35);
        box-shadow: inset 0 0.15em 0.3em rgba(27,31,35,0.15);
    }

    .sm-caret {
        display: inline-block;
        width: 0;
        height: 0;
        margin-left: 10px;
        border-left: 4px solid;
        border-top: 4px solid transparent;
        border-bottom: 4px solid transparent;
        /*float: right;*/
        margin-top: 3px;
        /*vertical-align: middle;*/
        content: "";
        position: absolute;
        top: 7px;
        right: 10px;
    }

    /* Sub menus */
    .sm-sub-menu { /*display: none;*/ }
    .sm-sub-header {
        margin-top: 2px !important;
        &:hover {
            background-color: transparent !important;
            color: black !important;
            cursor: default !important;
        }
        p {
            padding: 0;margin: 0;font-weight: 600;line-height: 26px;font-size: 16px;
        }
        button {
            float: left;
            font-weight: 700;
            line-height: 1;
            color: #000;
            filter: alpha(opacity=20);

            -webkit-appearance: none;
            padding: 0;
            cursor: pointer;
            background: 0 0;
            border: 0;

            -webkit-transition: all .5s cubic-bezier(.175,.885,.32,1);
            transition: all .5s cubic-bezier(.175,.885,.32,1);
            height: 26px;
            width: 30px;
            text-shadow: none;
            outline: none !important;
            margin: 0;
            opacity: 0.5;
            font-size: 14px !important;
            &:hover { opacity: 1; }
            i { font-size: 16px; }
        }
    }

    .sm-header {
        /*border-bottom: 1px solid #E6E7E7;*/
        background-color: #F5F5F5;
        & > h3 {
            padding: 6px 80px 8px 10px;
            margin: 0;
            height: 31px;
            text-align: left;
            color: #24292e;
            font-size: 16px;
            white-space: nowrap;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
        }
        button{
            position: absolute;
            -webkit-appearance: none;
            padding: 0;
            cursor: pointer;
            background: 0 0;
            border: 0;
            outline: none;
            line-height: 100%;
            color: #999999;
            top: 3px;
            font-size: 20px;
            &.sm-close-button { right: 10px;font-size: 25px; }
            &.sm-removeall-button { right: 32px; }
            &.sm-selectall-button { right: 54px; }
            &:hover { color: black; }
        }
    }

    .sm-input-area {
        padding: 3px 10px 10px 10px;
        background-color: #F5F5F5;
        .sm-input {
            display: block;
            background-color: white;
            margin: 0 !important;
            width: 100%;

            font-size: 14px;
            line-height: 20px;
            min-height: 20px;
            padding: 4px 6px;
            vertical-align: middle;
            box-sizing: border-box;

            outline: none !important;
            height: 30px;

            border-radius: 2px;
            border: 1px solid #dddddd;
            -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
            -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
            box-shadow: inset 0 1px 1px rgba(0,0,0,.075);

            transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
            &:focus {
                border: 1px solid #bbbbbb;box-shadow: 0 0 0 3px rgba(150,150,150, 0.2);
            }
        }
    }

    /**
     * "Get all" button
     */
    div.sm-button {
        display: inline-block;
        border-bottom-right-radius: 0;
        border-top-right-radius: 0;
        cursor: pointer;
        text-align: center;
        box-sizing: border-box;

        border: 0;
        width: 24px;
        height: 100%;
        padding: 0;
        vertical-align: middle;
        line-height: 100%;
        position: absolute;
        top: 0;
        right: 0;
        span.caret {
            position: absolute;top: 50%;right: 12px;margin-top: -1px;vertical-align: middle;
        }
    }

    div.sm-clear-btn {
        position: absolute;
        top: 0;
        right: 25px;
        display: block;
        width: auto;
        height: 100%;
        cursor: pointer;
        font-size: 20px;
        color: #666666;
        margin: 0;
        padding: 4px 0 0 0;
        box-sizing: border-box;
        line-height: 1;
        font-family: "Helvetica Neue Light", "HelveticaNeue-Light", "Helvetica Neue", Calibri, Helvetica, Arial;
        &:hover { color: black;font-weight: bold; }
    }

    /* group type */
    .sm-result-tabs {
        padding: 0 10px;
        border-bottom: 1px solid #E6E7E7;
        background-color: #F5F5F5;
        ul {
            position: relative;
            bottom: -1px;
            padding: 0;
            margin: 0;
            text-align: left;
            li {
                display: inline-block;
                a {
                    display: inline-block;
                    padding: 7px 10px 3px;
                    font-size: 14px;
                    color: #AAAAAA;
                    text-decoration: none;
                    cursor: pointer;
                    line-height: 100%;
                    background: transparent;
                    border: 1px solid transparent;
                    border-radius: 3px 3px 0 0;
                    font-family: "Helvetica Neue Light", "HelveticaNeue-Light", "Helvetica Neue", Calibri, Helvetica, Arial;
                    &.active {
                        color: #24292e;
                        background-color: #fff;
                        border-color: #dfe2e5;
                        border-bottom-color: #fff;
                    }
                }
            }
        }
    }

    /**
     * Results
     */
    .sm-result-area {
        /* background-color: transparent; */
        background-color: white;
        /*border: 1px solid #D6D7D7;*/
        list-style: none;
        margin: 0;
        padding: 5px 0;
        position: relative;
        width: 100%;
        overflow-y: auto;
        overflow-x: hidden;
        clear: both;
        &:before,
        &:after{ display: table;content: " "; }
        &.sm-list-mode{ border-top: 1px solid #E6E7E7;}
        &.sm-advance { min-width: 260px; }
        &.sm-scroll-limit { max-height: 260px; }
        &.shadowDown{
            box-shadow: 0 3px 12px rgba(0,0,0,0.2);
            -moz-box-shadow: 0 3px 12px rgba(0,0,0,0.2);
            -webkit-box-shadow: 0 3px 12px rgba(0,0,0,0.2);
        }
        &.shadowUp{
            box-shadow: 0 -1px 12px rgba(0,0,0,0.2);
            -moz-box-shadow: 0 -1px 12px rgba(0,0,0,0.2);
            -webkit-box-shadow: 0 -1px 12px rgba(0,0,0,0.2);
        }
    }

    /* regular menu item style */
    ul.sm-results {
        background-color: white;list-style: none;margin: 0;padding: 0;
        &.sm-regular {
            width: auto;min-width: 150px;padding: 5px 0;
            & > li {
                padding: 0;
                &:hover{
                    background-color: #53A4EA;color: white;
                    a { color: white; }
                }
                & > a { width: 100%;display: block;padding: 7px 10px; }
                &.sm-disabled,
                &.sm-disabled:hover,
                &.sm-disabled a{ background-color: white;color: #CCCCCC;cursor: default; }
                &.sm-header,
                &.sm-header:hover,
                &.sm-header a {
                    background-color: white;color: black;font-size: 16px;font-weight: 600;cursor: default;
                }
                &.sm-divider { background-color: white; }
            }
        }

        & > li {
            height: auto;
            line-height: 1;
            margin: 0;
            overflow: hidden;
            padding: 3px 10px;
            position: relative;
            text-align: left;
            white-space: nowrap;
            font-size: 14px;
            color: #333333;
            cursor : pointer;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
            & > a { color: #333333;text-decoration: none;transition: none; }
            & > div.sm-selected-icon {
                position: absolute;top: 6px;
                & > i { font-size: 18px;visibility: hidden; }
            }
            & > div.sm-item-text {
                font-size: 14px;display: block;line-height: 1.7;position: relative;margin-left: 30px;
            }
            &.sm-message-box {
                position: relative;cursor: default;padding-left: 12px;
                i { font-size: 22px;position: absolute;top:6px; }
                span { font-size: 16px;line-height: 1.7;margin-left: 28px; }
            }
            &.sm-divider {
                margin: 8px 0;
                padding: 0;
                cursor: default;
                overflow: hidden;
                border-bottom: 1px solid #E5E5E5;
            }
            &.sm-over { background-color: #53A4EA !important;color: #fff !important;cursor: pointer; }
            &.sm-selected {
                font-weight: 600;
                & > div.sm-selected-icon > i { visibility: visible; }
            }
        }
    }

    .sm-input-off { background: #eee;color: #333333; }
    .sm-hide { display: none; }

    /* 移除微软浏览器，在输入框输入文本后，会出现X的问题，but it's look like not working */
    input::-ms-clear{display:none;}/*隐藏文本框叉子*/
    input::-ms-reveal{display:none;}/*隐藏密码框小眼睛*/

    /* icons */
    @font-face {font-family: "iconfont";
        src: url(''); /* IE9*/
        src: url('') format('embedded-opentype'), /* IE6-IE8 */
        url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff'),
        url('') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
        url('') format('svg'); /* iOS 4.1- */
    }

    .iconfont {
        font-family:"iconfont" !important;
        font-size:14px;
        font-style:normal;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    .icon-warn:before { content: "\e663"; }
    .icon-selectall:before { content: "\e722"; }
    .icon-selected:before { content: "\e72e"; }
    .icon-removeall:before { content: "\e74b"; }
    .icon-back:before { content: "\e627"; }
</style>